<template>
    <div style="margin-top: 20px;">
        <el-form :model="queryParams" ref="queryRef" :inline="true" label-width="100px">
            <el-form-item label="发布时间">
                <el-form-item label-width="0px">
                    <el-date-picker style="width:140px" v-model="queryParams.startTime" type="date" placeholder="开始时间"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
                <span class="spanStyle">至</span>
                <el-form-item>
                    <el-date-picker style="width:140px" v-model="queryParams.endTime" type="date" placeholder="结束时间"
                        value-format="YYYY-MM-DD" />
                </el-form-item>
            </el-form-item>
            <el-form-item label="关键词" prop="keyword">
                <el-input style="width:300px" v-model="queryParams.keyword" placeholder="请输入关键词" clearable />
            </el-form-item>
            <el-form-item style="margin-left: 40px;">
                <el-button type="primary" @click="handleQuery">搜索</el-button>
                <el-button type="primary" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <!-- <div class="titleSort">
            <p>主题：{{ $route.query.value }}</p>
            <p>排序：发布时间</p>
            <p>点击量</p>
            <p>下载量</p>
        </div> -->
        <el-table class="listTable" ref="tableRef" :data="dataList" stripe v-loading="loading">
            <el-table-column label="" width="60px" align="center">
                <template #default="scope">
                    <span>{{ (queryParams.page - 1) * queryParams.rows + scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="meansName" header-align="center" align="center" label="名称" width="200">
                <template #default="{ row }">
                    <span v-html="brightenKeyword(row.meansName)" style="
                    cursor: pointer;" @click="handleView(row)"></span>
                </template>
            </el-table-column>
            <el-table-column prop="module1" header-align="center" align="center" label="名称">
                <template #header>
                    <el-select v-model="queryParams.module1" placeholder="所属一级模块">
                        <el-option v-for="item in searchTypeList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <template #default="{ row }">
                    <span>{{ row.module1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="module2" header-align="center" align="center" label="名称">
                <template #header>
                    <el-select v-model="queryParams.module2" placeholder="所属二级模块" @change="chooseType">
                        <el-option v-for="item in searchTypeList2" :key="item.value" :label="item.label"
                            :value="item.value">
                        </el-option>
                    </el-select>
                </template>
                <template #default="{ row }">
                    <span>{{ row.module2 }}</span>
                    <!-- <span>{{ row.module2.includes('-')?row.module2.split('-')[1]:row.module2 }}</span> -->
                </template>
            </el-table-column>
            <el-table-column prop="publishingDate" header-align="center" align="center" sortable
                label="发布日期"></el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" v-model:page="queryParams.page" v-model:limit="queryParams.rows"
            @pagination="getSearchList" />

        <detilDialog v-model:dialogVisible="dialogOpen" :title="title" :module2="module2" :id="detailId" v-if="dialogOpen"/>
    </div>
</template>

<script setup>
import detilDialog from './detilDialog.vue'
import { getList } from "@/api/index/search"
import { onMounted, watch } from 'vue';
import {checkPermi} from "@/utils/permissionBtn"
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const dialogOpen = ref(false)
const title = ref('专题图');
const module2 = ref('');
const detailId = ref('')
const data = reactive({
    queryParams: {
        page: 1,
        rows: 10,
        startTime: undefined,
        endTime: undefined,
        keyword: route.query.value,
        module1: route.query.searchType,
        module2: '',
        // sortOrNot: false,
    },
    searchTypeList: [
        { label: '全部分类', value: '全部分类' }, { label: '专题图', value: '专题图' }, { label: '信息成果', value: '信息成果' }, { label: '历史地震', value: '历史地震' }, { label: '知识学习', value: '知识学习' }, { label: '服务案例', value: '服务案例' }
    ],
    searchTypeList2: [],
    dataList: [],
    total: 0,
    loading: false,
    valueReplace:'',
})
const handleQuery = () => {
    queryParams.value.page = 1;
    getSearchList();
}
// 获取查询数据
const getSearchList = () => {
    valueReplace.value = queryParams.value.keyword;
    loading.value = true;
    getList(queryParams.value).then(res => {
        loading.value = false;
        dataList.value = res.data.rows ? res.data.rows : [];
        total.value = res.data.total;
    }).catch(err => { loading.value = false; })
}
const { queryParams, searchTypeList, searchTypeList2, dataList, total, loading, valueReplace } = toRefs(data);
watch(() => queryParams.value.module1, val => {
    if (val) {
        queryParams.value.module2 = ''
    }
    switch (val) {
        case '全部分类':
            searchTypeList2.value = []
            break;
        case '专题图':
            searchTypeList2.value = [{ label: '活断层分布图', value: '活断层分布图' }, { label: '活断层避让分布图', value: '活断层避让分布图' }, { label: '综合减灾社区分布图', value: '综合减灾社区分布图' }]
            break;
        case '信息成果':
            searchTypeList2.value = [{ label: '地震灾害损失预评估', value: '地震灾害损失预评估' }, { label: '地震灾害损失评估', value: '地震灾害损失评估' }, { label: '重大活动期间地震灾害风险评估', value: '重大活动期间地震灾害风险评估' }, { label: '地震现场人员伤亡分布及致死原因调查报表', value: '地震现场人员伤亡分布及致死原因调查报表' }]
            break;
        case '历史地震':
            searchTypeList2.value = [{ label: '历史地震事件', value: '历史地震事件' }, { label: '地震灾害信息', value: '地震灾害信息' }]
            break;
        case '知识学习':
            searchTypeList2.value = [{ label: '技术资料', value: '技术资料' }, { label: '法规标准', value: '法规标准' }, { label: '科普知识', value: '科普知识' }]
            break;
        case '服务案例':
            searchTypeList2.value = [{ label: '典型案例', value: '典型案例' }]
            break;
        default:
            break;
    }
    handleQuery();
},{immediate: true, deep: true})
const chooseType = (val) => {
    if (val) {
        handleQuery();
    }
}
const resetQuery = () => {
    proxy.resetForm("queryForm");
    queryParams.value = {
        page: 1,
        rows: 10,
        startTime: undefined,
        endTime: undefined,
        keyword: route.query.value,
        module1: route.query.searchType,
        module2: '',
        sortOrNot: false,
    },
        // queryParams.value = { ...queryParams.value, meansName: '', module1: '', module2: '' }
        handleQuery();
}

const handleView = (row)=>{
    let query = {
      attachId: row.attachmentInfo?row.attachmentInfo[0].attachId:'',
      name: row.attachmentInfo?row.attachmentInfo[0].attachName:'',
    }
    // 专题图预览
    if(row.module1=='专题图'){
        let flagZtt = true;
        flagZtt = checkPermi(row.dataOrigin,'look')
        if(!flagZtt){
            proxy.$modal.msgWarning("暂无权限查看");
            return;
        }    
        dialogOpen.value = true;
        title.value = '专题图'
        module2.value = row.module2;
        detailId.value = row.id;
    }else if(row.module1=='历史地震'){
        dialogOpen.value = true;
        title.value = '历史地震'
        module2.value = row.module2;
        detailId.value = row.id;
    }else if(row.module1=='信息成果'){
        if(row.module2=='地震现场人员伤亡分布及致死原因调查报表'){
            if(query.name.includes('.xls')){
                let flagDowon = true;
                flagDowon = checkPermi(row.dataOrigin,'dowon',row.meansName,'评估报表')
                if(!flagDowon){
                  proxy.$modal.msgWarning("暂无权限下载");
                  return;
                }
                location.href = import.meta.env.VITE_APP_BASE_API + "/attachment/downLoadFile?attachId=" + encodeURIComponent(query.attachId);
            }else{
                let flagView = true;
                flagView = checkPermi(row.dataOrigin,'look',row.meansName,'评估报表')
                if(!flagView){
                  proxy.$modal.msgWarning("暂无权限查看");
                  return;
                }
                const routeUrl = router.resolve({
                    path: "/viewItemFile",
                    query: { id: query.attachId, name: query.name,  },
                  });
                  window.open(routeUrl.href, "_blank");
                }
        }else{
            let flag = true;
            flag = checkPermi(row.dataOrigin,'look',row.meansName,'评估报告')
            if(!flag){
              proxy.$modal.msgWarning("暂无权限查看");
              return;
            }
            const routeUrl = router.resolve({
              path: "/viewItemFile",
              query: { id: query.attachId, name: query.name },
            });
            window.open(routeUrl.href, "_blank");
        }
    }else if(row.module1=='知识学习'||row.module1=='服务案例'){
        const routeUrl = router.resolve({
              path: "/viewItemFile",
              query: { id: query.attachId, name: query.name },
            });
            window.open(routeUrl.href, "_blank");
    }
}

const brightenKeyword = (title) => {
    const reg = new RegExp(valueReplace.value, 'ig');
    if (
        title.indexOf(valueReplace.value) !== -1 &&
        route.query.value !== ''
    ) {
        return title.replace(
            reg,
            '<font color="#f00">' + valueReplace.value + '</font>'
            , '-g')
    } else {
        return title
    }
}
onMounted(() => {
    // getSearchList();
})
</script>

<style scoped lang="scss">
.el-form--inline .el-form-item {
    margin-right: 0px !important;
}

.spanStyle {
    display: inline-block;
    width: 40px;
    text-align: center;
}

.titleSort {
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #e6ebf6;
    margin-bottom: 20px;
    padding-left: 20px;

    p {
        margin-right: 60px;
    }
}

:deep(.el-table) {
    .sort-caret.ascending {
        display: none;
    }

    .caret-wrapper {
        top: -3px;
    }
}
.listTable{
    margin-bottom: 20px;
}
</style>